<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>后台管理-登陆</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/css/style.min.css">
    <link rel="stylesheet" href="/static/css/load-styles.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/layui/css/public.css">
    <script src="/static/layui/layui.js" charset="utf-8"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/jquery-3.6.0.js" type="text/javascript"></script>
    <script src="/static/js/jquery.cookie.js" type="text/javascript"></script>
    <style>
        img,
        input,
        .switch select {
            vertical-align: middle;
        }
        
        .btn {
            padding: 10px 0;
            display: flex;
        }
        
        .btn button {
            width: 400px;
            height: 40px;
            background: pink;
            color: #fff;
            border-radius: 15px;
            border: none;
            outline: none;
            font-size: 18px;
        }
        
        .btn button:hover {
            background-color: pink;
            color: #000;
            box-shadow: 0 0 50px pink;
            -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0, 0, 0, 0.3));
        }
        
        fieldset {
            display: block;
            margin-inline-start: 2px;
            margin-inline-end: 2px;
            padding-block-start: 0.35em;
            padding-inline-start: 0.75em;
            padding-inline-end: 0.75em;
            padding-block-end: 0.625em;
            min-inline-size: min-content;
            border-width: 2px;
            border-top-width: 2px;
            border-right-width: 2px;
            border-bottom-width: 2px;
            border-left-width: 2px;
            border-style: groove;
            border-top-style: groove;
            border-right-style: groove;
            border-bottom-style: groove;
            border-left-style: groove;
            border-color: threedface;
            border-top-color: threedface;
            border-right-color: threedface;
            border-bottom-color: threedface;
            border-left-color: threedface;
            border-image: initial;
            border-image-source: initial;
            border-image-slice: initial;
            border-image-width: initial;
            border-image-outset: initial;
            border-image-repeat: initial;
        }
        
        #emailinput {
            width: 360px;
        }
        
        #checkbtn {
            border-radius: 6px;
        }
        
        .error_icon {
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 20px;
            background: url(/static/images/error.png) no-repeat;
            margin-top: 0px;
        }
        
        .error {
            color: #c81523;
        }
    </style>
</head>

<body>
    <div id="app" class="layuimini-container">
        <div class="layuimini-main">

            <fieldset class="table-search-fieldset">
                <legend>修改密码</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <div class="csf-field csf-field-text">
                        <div class="csf-title">
                            <h4>旧密码</h4>
                        </div>
                        <div class="csf-fieldset"><input type="text" @input="pwdformatoldact" v-model="oldpwd">&nbsp;
                            <div class="clear"></div>
                            <span class="error" v-show="oldpwd_eshow && !oldpwd_check"> <i class="error_icon"></i> 密码需为6--20位数字,字母,任意字符 </span>
                        </div>
                        <div class="clear"></div>

                    </div>
                    <div class="csf-field csf-field-text">
                        <div class="csf-title">
                            <h4>新密码</h4>
                        </div>
                        <div class="csf-fieldset"><input type="text" @input="pwdformatnewact" v-model="newpwd">&nbsp;
                            <div class="clear"></div>
                            <span class="error" v-show="newpwd_eshow && !newpwd_check"> <i class="error_icon"></i> 密码需为6--20位数字,字母,任意字符 </span>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="csf-field csf-field-text">
                        <div class="csf-title">
                            <h4>确认密码</h4>
                        </div>
                        <div class="csf-fieldset"><input type="text" @input="pwdformatveract" v-model="verpwd">&nbsp;
                            <div class="clear"></div>
                            <span class="error" v-show="verpwd_eshow && !verpwd_check"> <i class="error_icon"></i> 两次密码不一致 </span>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="csf-field csf-field-text">
                        <div class="csf-title">
                            <h4>邮件验证码</h4>
                        </div>
                        <div class="csf-fieldset"><input type="text" v-model="emailcode">&nbsp;
                            <button type="button" id="checkbtn" :class="ebtnclass" :disabled="ebtndisabled" @click="emailcodeact" v-text="emailcodebtn">获取验证码</button>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="csf-field csf-field-text">
                        <div class="csf-fieldset btn">&nbsp;
                            <button @click="submit">确定</button>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </fieldset>
        </div>
        <script src="/static/js/page/alterpwd.js" charset="utf-8"></script>
</body>

</html>